<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="orders by dede58.com"/>
    <title>知识付费系统 - 首页</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
    #myInput {
        background-image: url('https://static.runoob.com/images/mix/searchicon.png'); /* 搜索按钮 */
        background-position: 10px 12px; /* 定位搜索按钮 */
        background-repeat: no-repeat; /* 不重复图片*/
        width: 70%;
        font-size: 16px; /* 加大字体 */
        padding: 12px 20px 12px 40px;
        border: 1px solid #ddd;
        border-radius: 19px;
        margin-bottom: 12px;
    }

    #myUL {
        /* 移除默认的列表样式 */
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    #myUL li a {
        border: 1px solid #ddd; /* 链接添加边框 */
        margin-top: -1px;
        background-color: #f6f6f6;
        padding: 12px;
        text-decoration: none;
        font-size: 18px;
        color: black;
        display: block;
    }

    #myUL li a.header {
        background-color: #e2e2e2;
        cursor: default;
    }

    #myUL li a:hover:not(.header) {
        background-color: #eee;
    }
</style>
<body>

    <div id="app">

        <!-- start header -->
        <header>
            <div class="top center">
                <div class="left fl">
                    <ul>
                        <li>
                            <!-- 这里直接去首页 -->
                            <a href="index.html" target="_self">基于Spring Cloud的知识付费系统</a>
                        </li>
                        <div class="clear"></div>
                    </ul>
                </div>
                <div class="right fr">
                    <div v-if="username.length == 0" style="color: #cccccc">
                        <a href="login.html" style="color: #eeeeee" target="_self">登录</a>
                        &nbsp;&nbsp; | &nbsp;&nbsp;
                        <a href="register.html" style="color: #eeeeee" target="_self">注册</a>
                    </div>
                    <div v-if="username.length > 0" style="color: #cccccc">
                        <a v-if="userType == 2" href="topicAdmin.html" style="color: #eeeeee">
                            <img v-bind:src="headimg" style="width: 25px;height: 25px;border-radius:50%;">
                            &nbsp;&nbsp;{{username}}
                        </a>
                        <a v-if="userType != 2" href="#" v-on:click="setSelfUserId(loginUserId)" style="color: #eeeeee">
                            <img v-bind:src="headimg" style="width: 25px;height: 25px;border-radius:50%;">
                            &nbsp;&nbsp;{{username}}
                        </a>
                        &nbsp;&nbsp; | &nbsp;&nbsp;
                        <a href="editArticle.html" style="color: #eeeeee" target="_self">立即发帖</a>
                        &nbsp;&nbsp; | &nbsp;&nbsp;
                        <a v-on:click="loginOut" href="#" style="color: #eeeeee">注销</a>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </header>
        <!--end header -->

        <br>

        <center>
            <input type="text" id="myInput" v-model="title" v-on:keyup="getTopicList" placeholder="搜索...">
        </center>

        <br>
        <center>
            <b>
                <h2>知识星球 - 让知识找到灵魂的归宿</h2>
            </b>
        </center>
        <br>

        <center v-if="topicList != null">
            <table id="showTopic" class="table table-hover" style="width: 70%;margin-top: 15px;">
                <thead>
                <tr>
                    <th style="text-align: center" colspan="3">
                        付费系统 - 内容首页列表
                    </th>
                </tr>
                </thead>
                <tbody v-for="(topic,index) in topicList">
                <tr class="active" style="line-height: 1.8">
                    <td align="center" v-on:click="setSelfUserId(topic.userId)" width='15%'>
                        <img v-bind:src="topic.userImg" style="width: 60px;height: 60px;border-radius:50%;border: 3px solid burlywood;">
                        <br>
                        <b>
                            <a href="#" style="font-size: 17px;color: #101010">{{topic.userName}}</a>
                        </b>
                    </td>
                    <td align="left" width='70%'>
                        <span style="font-size: 20px;font-weight: bolder">
                            <a href="#" @click="setTopicId(topic.id)" style="color: #101010">
                                {{topic.title}} &nbsp;&nbsp;
                                <img style="width: 16px;height: 16px" src="https://appimg.onexinli.com/athena/20210407/kn753sby.png">&nbsp;
                                <font style="color: #ff4500;font-size: 15px">
                                    热度值&nbsp;👉&nbsp;{{topic.sortNo}}
                                </font>
                            </a>
                        </span>
                        <br>
                        <span style="font-size: 15px;overflow: hidden;text-overflow: ellipsis">
                            {{topic.topicMsg}}
                        </span>
                        <br>
                        <span style="font-size: 13px">
                            <a href="#" @click="setTopicId(topic.id)" style="color: gray">
                            阅读 {{topic.visitNum}} &nbsp;&nbsp;&nbsp;
                            评论 {{topic.commentNum}} &nbsp;&nbsp;&nbsp;
                            点赞 {{topic.likeNum}} &nbsp;&nbsp;&nbsp;
                            收藏 {{topic.collectNum}}
                            </a>
                        </span>
                    </td>
                    <td align="left" width='15%' style="font-size: 13px;margin-top: 10px">
                        <span style="font-size: 15px;font-weight: bolder">
                            发布于:
                        </span>
                        <br>
                        <span style="font-size: 15px;">
                            {{topic.created}}
                        </span>
                    </td>
                </tr>
                </tbody>
            </table>
        </center>

        <!-- end banner_x -->

        <center>
            <br>
            <!-- 分页组件 -->
            <div class="page" style="text-align: center">
                <a style="color: blue;cursor: pointer" @click="prePage">
                    上一页
                </a>
                &nbsp;&nbsp;
                <font style="color: black;">第{{pageNum}}页 / 共{{total}}页&nbsp;&nbsp;</font>
                <a style="color: blue;cursor: pointer" @click="nextPage">
                    下一页
                </a>
            </div>
        </center>

        <div style="bottom: 0px;background: #212529;width: 100%;height: 40px;position:fixed"></div>

    </div>

<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/index.js"></script>

</body>
</html>